<template>
<div class='progress' :class="size">
  <div class="bar" :style="{width: value+'%', 'background-color': color}"></div>
</div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number || String,
      default: 0
    },
    color: {
      type: String,
      default: '#5f77fd'
    },
    size: {
      type: String,
      default: 'small'
    }
  }
}
</script>

<style lang='stylus' scoped>
.progress{
  height 14px
  background-color #D3D3D3
  border-radius 4px
  overflow hidden
  .bar{
    height 100%
    transition width linear 300ms
    border-radius 4px
  }
  &.big{
    height 30px
  }
}
</style>
